import classNames from 'classnames';
import { useContext, useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
// import QRCode from 'react-qr-code';
import { useDispatch } from 'react-redux';
import Alert from 'src/component/Alert';
import { Severity } from 'src/constant/Notification';
import { ThemeContext } from 'src/context/ThemeContext';
import { openSnackbar } from 'src/redux/uiSlice';
import { getGoogleVerify } from 'src/service/userService';
import style from './Step2.module.scss';
import axios from 'axios';

const Step2 = () => {
  const { IcCopy } = useContext(ThemeContext).image;
  const dispatch = useDispatch();
  const [secret, setSecret] = useState<string>('');
  const [uri, setUri] = useState<string>('');

  useEffect(() => {
    const uMail = localStorage.getItem("uMail")
    const token = localStorage.getItem("token")
    getGoogleVerify({
      uMail: uMail,
      token: token,
    })
      .then((res) => {
        setSecret(res.SetupCode);
        setUri(res.CodeImage);
      })
      .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
  }, []);

  const onCopy = () => {
    dispatch(openSnackbar({ message: "复制成功" }));
  };

  return (
    <div>
      <div className={style.heading}>启用二步骤验证</div>
      <div className={style.subHeading}>使用 App 扫描此二维码，并备份此密钥</div>
      <div className={style.qrcodeBlock}>
        <div className={style.qrcodeImg}>
          <div className={style.qrcode}>
            {/* <QRCode value={uri} size={140} /> */}
            <img src={uri} width={"160px"} />
          </div>
        </div>
        <div className={style.others}>
          <div className={classNames(style.noticeText, style.centerText)}>
            如果您无法扫描二维码，请在 App 中手动输入此二维码
          </div>
          <div className={style.codeCopy}>
            <div className={style.codeCont}>{secret}</div>
            <CopyToClipboard text={secret} onCopy={onCopy}>
              <img src={IcCopy} className={style.copyIcon} />
            </CopyToClipboard>
          </div>
          <div className={style.divider} />
          <div className={style.alertItems}>
            <Alert severity={Severity.Clear}>请将此密钥保存在纸上。 此密钥将允许您在手机丢失的情况下恢復您的 Google 身份验证</Alert>
            <Alert severity={Severity.Warning}>若您遗失了二步骤验证码，请与客服联系</Alert>
          </div>
        </div>
      </div>
      <div className={classNames(style.noticeText, style.marginTop40)}>
        我已经扫描了二维码并记下了 16 位密钥
      </div>
    </div >
  );
};

export default Step2;
